<template>
  <div class="nav-bar">
    <ul class="nav-list">
      <li v-for="(item, index) in tabList" :key="index"
        :class="['nav-list-item', navType == item.path ? 'router-link-active' : '']" @click="goPage(item, index)"
        v-waves>
        <div class="img img0">
          <!-- <img :src="require('@/assets/layout/'+ navType==index? item.activeIcon:item.icon+'.png')" alt width="100%" height="100%" /> -->
          <img v-if="navType == item.path" :src="item.activeIcon" alt width="100%" height="100%" />
          <img v-else :src="item.icon" alt width="100%" height="100%" />
        </div>
        <span>{{ item.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import cgx from "@/assets/images/navBar/cg.png"
import cgxA from "@/assets/images/navBar/cgActive.png"
import home from "@/assets/images/navBar/home.png"
import homeA from "@/assets/images/navBar/homeActive.png"
import sh from "@/assets/images/navBar/sh.png"
import shActive from "@/assets/images/navBar/shActive.png"
import work from "@/assets/images/navBar/work.png"
import workActive from "@/assets/images/navBar/workActive.png"
import { useUser } from "@/stores/user"
const userStore = useUser()
const router = useRouter()
const route = useRoute()
const navType = ref(null)

function goPage(item, index) {
  router.push({
    path: item.path
  })
  navType.value = item.path
}

const tabList = ref([
  // {
  //   name: "草稿箱",
  //   path: "/cgx",
  //   icon: cgx,
  //   activeIcon: cgxA
  // },
  {
    name: "首页",
    path: "/statistics",
    icon: home,
    activeIcon: homeA
  },
  {
    name: "重点工作",
    path: "/home",
    icon: work,
    activeIcon: workActive
  },
  {
    name: "审核",
    path: "/sh",
    icon: sh,
    activeIcon: shActive
  },

])

watch(() => route, (newV) => {
  console.log(newV)
  // if(newV.fullPath)
  if (newV.meta.index != 1) {
    return
  }
  tabList.value.forEach((item, index) => {
    if (item.path == newV.fullPath) {
      navType.value = item.path
    }
  })
}, {
  immediate: true,
  deep: true
})

onMounted(() => {
  // 处理业务科室填报人和领导要草稿箱其他都没有
  if (!['informant', 'secondLd'].includes(userStore.userInfo.userType)) {
    tabList.value = tabList.value.filter(item => item.name != '草稿箱')
  }
  // 业务科室填报人没有审核功能
  if (['informant'].includes(userStore.userInfo.userType)) {
    tabList.value = tabList.value.filter(item => item.name != '审核')
  }
})




</script>

<style lang="scss" scoped>
.nav-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 98px;
  // padding: 10px 0;
  z-index: 1000;
  background: #fff;
  border-top: 1px solid rgba(226, 226, 226, 1);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);

  .nav-list {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    flex-direction: row;
    padding: 0;

    .nav-list-item {
      display: flex;
      width: 33%;
      flex-direction: column;
      text-align: center;
      justify-content: center;
      align-items: center;
      color: #666;

      &.router-link-active {
        color: #30c8ff;
      }

      i {
        text-align: center;
        font-size: 36px;
      }

      .img {
        width: 36px;
        height: 36px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-bottom: 5px;
      }

      span {
        font-size: 24px;
      }

      .van-icon-shopping-cart-o {
        margin: 0 auto;
        margin-bottom: 4px;
      }
    }
  }
}
</style>
